<template>
  <el-select
    v-model="model"
    :disabled="disabled"
    :size="size"
    style="width: 100%;"
    @change="handleChange"
    :clearable="!showAll && clearable"
    :placeholder="labelAll?labelAll:$t('common.text.all')"
  >
    <el-option :label="labelAll?labelAll:$t('common.text.all')" value="" v-if="showAll"/>
    <el-option :label="labelYes?labelYes:$t('common.text.yes')" value="1" />
    <el-option :label="labelNo?labelNo:$t('common.text.no')" value="0" />
  </el-select>
</template>
<script>
/**
 * 是否下拉框组件
 */
export default {
  name: "YesNoSelect",
  model: {
    prop: 'model',
    event: 'change'
  },
  props: {
    model: {
      default: null,
      validator: function (value) {
        // v-model不能为null
        const valide = (value !== null && value !== undefined);
        if(!valide) {
          console.warn('v-model不能为null')
        }
        return valide;
      }
    },// 父组件通过v-model传过来, 如果传来的值为null为出现 Cannot read property 'some' of null
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    showAll: {
      type: Boolean,
      default: false
    },
    labelYes: {
      type: String,
      default: null
    },
    labelNo: {
      type: String,
      default: null
    },
    labelAll: {
      type: String,
      default: null
    },
    clearable: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  created() {
  },
  methods: {
    handleChange(val){
      if(!val)
        this.model = ""
      this.$emit('change', val);
    }
  }
};

</script>

<style scoped>
</style>
